<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>O suis-je ?</title>
<meta name="viewport"
		content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<style type="text/css">
html {
        height: 100%
}

body {
        height: 100%;
        margin: 0px;
        padding: 0px
}

#conteneur_carte {
        height: 100%
}
</style>
<script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
	var carte;
	var bulleInfo;

	/**
	 * Cette fonction est appelé quand le navigateur a déterminé la position du visiteur
	 * Affiche une image à l'emplacement trouvé et lance la recherche de l'adresse et de l'altitude
	 */
	function afficheOuJeSuis(position) {
		latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
		carte.setCenter(latlng); //Centre la carte sur la position
		carte.setZoom(14); // Zoom sur la position
		//Création d'un marquer
		marqueur = new google.maps.Marker({
			position: latlng, //Position du marqueur
			map: carte, //La carte où l'on doit afficher le marqueur
			//L'icone à afficher : Url de Google Apis qui permet de générer un marqueur avec le texte voulu
			icon: "http://chart.apis.google.com/chart?chst=d_bubble_icon_text_small&chld=location|bb|Vous%20etes%20ici|FFFFFF|000000",
			title: "Je suis ici !"
		});
		//Crétion de la bulle d'information affiché en cliquant sur le marqueur
		var bulleInfo = new google.maps.InfoWindow();
		//Affiche le contenue initiale de la popup d'information
		bulleInfo.setContent('Latitude et longitude : ' + latlng);
		//Ecoute le clic sur le marqueur pour affiche l'info bulle
		google.maps.event.addListener(marqueur, 'click', function() {
			bulleInfo.open(carte,marqueur);
		});

		//Lance la recherche de l'adresses 
		AQuelAdresseJeSuis(latlng, bulleInfo);
		//Lance la recherche de l'altitude
		AQuelAltitudeJeSuis(latlng, bulleInfo);	
	}

	/**
	 * Cette fonction cherche l'adresse du visiteur en utilisant le service de Google Geocoder
	 * Ajoute ensuite dans la bulle d'information l'adresse trouvé
	 */
	function AQuelAdresseJeSuis(latlng, bulleInfo) {
		var geocoder = new google.maps.Geocoder();
		geocoder.geocode({'latLng': latlng}, function(resultats, statut) {
			if (statut == google.maps.GeocoderStatus.OK) {
				if (resultats[0]) {
					carte.setZoom(14);
					bulleInfo.setContent(bulleInfo.getContent() + '<br/>Adresse : ' + resultats[0].formatted_address);
				} else {
					bulleInfo.setContent(bulleInfo.getContent() + "<br/>Nous n'avons pas trouvé cette adresse");
				}
			} else {
				alert("Le service Geocoder a rencontré une erreur : " + statut);
			}
		});
	}

	/**
	 * Cette fonction cherche l'altitude du visiteur en utilisant le service de Google Elevation
	 * Affiche ensuite l'altitude dans la bulle d'information l'altitude trouvé
	 */
	function AQuelAltitudeJeSuis(latlng, bulleInfo) {
		var altitude = new google.maps.ElevationService();
		altitude.getElevationForLocations({'locations': [latlng]}, function(resultats, statut) {
		  if (statut == google.maps.ElevationStatus.OK) {
			if (resultats[0]) {
			  bulleInfo.setContent(bulleInfo.getContent() + "<br/>L'altitude est de " + Math.round(resultats[0].elevation) + " mètres.");
			} else {
			  bulleInfo.setContent(bulleInfo.getContent() + "<br />Pas d'altitude trouvée");
			}
		  } else {
			  alert("Le service Elevation a rencontré une erreur : " + statut);
		  }
		});
	}

	/**
	 * Cette fonction est appelé quand la géolocalisation a échoué
	 * Affiche un message d'erreur
	 */
	function erreurAfficheOuJeSuis() {
		alert("Impossible de savoir où vous êtes ! Demandez votre chemins à un passant sinon ...");
	}

	/**
	 * Cette fonction est appelé quand le navigateur a finit de charger la page HTML (body.onload)
	 * Affiche la carte centré sur la France et lance la géolocalisation si elle est disponible
	 */
	function initialisation() {
		var latlng = new google.maps.LatLng(46.75984,1.738281); // Coordonnées de la France
		var mesOptions = {
			zoom: 5, //Zoom de hauteur 5 (compris entre 1 et 22)
			center: latlng, //On centre la carte sur les coordonées de la France
			mapTypeId: google.maps.MapTypeId.ROADMAP //Type de carte avec les routes
		};
		carte = new google.maps.Map(document.getElementById("conteneur_carte"), mesOptions); //Création de la carte définie par mesOptions et qui sera placée dans le conteneur HTML identifié comme “conteneur_carte”
		if (navigator.geolocation) { //Si le Navigateur est compatible avec l'API HTML5 Geolocation
			navigator.geolocation.getCurrentPosition(afficheOuJeSuis, erreurAfficheOuJeSuis); //On demande la position courante
		}
		else {
			erreurAfficheOuJeSuis(); //Sinon on affiche un message
		}			
	}
</script>
</head>
<body onload="initialisation()">
<div id="conteneur_carte" style="width: 100%; height: 100%"></div>
</body>
</html>
